<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const breadcrumbs = ref([])

// 监听路由变化，更新面包屑
watch(
  () => route.path,
  () => {
    breadcrumbs.value = []
    
    if (route.meta && route.meta.title) {
      breadcrumbs.value.push({
        title: route.meta.title,
        path: route.path
      })
    }
  },
  { immediate: true }
)
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped>
.el-breadcrumb {
  font-size: 14px;
  line-height: 60px;
}
</style> 